import 'package:flutter/material.dart';
import 'package:flutter_swiper_view/flutter_swiper_view.dart';
import 'package:my_app/route/route_path.dart';
import 'package:grouped_list/grouped_list.dart';
class IndexPage extends StatelessWidget {
  const IndexPage({super.key});

  @override
  Widget build(BuildContext context) {
    List _elements = [
      {'name': 'John', 'group': 'Team A'},
      {'name': 'Will', 'group': 'Team B'},
      {'name': 'Beth', 'group': 'Team A'},
      {'name': 'Miranda', 'group': 'Team B'},
      {'name': 'Mike', 'group': 'Team C'},
      {'name': 'Danny', 'group': 'Team C'},
    ];
    return WillPopScope(
      onWillPop: () async => false,
      child: Scaffold(
        // appBar: AppBar(title: const Text('首页')),
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(24.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                SizedBox(
                  height: 200,
                  child: Swiper(
                    itemBuilder: (context, index) {
                      return ClipRRect(
                        borderRadius: BorderRadius.circular(12),
                        child: Image.network(
                          "https://via.placeholder.com/350x150",
                          fit: BoxFit.cover,
                          errorBuilder: (context, error, stackTrace) {
                            return Image.asset(
                              'assets/default_image.png',
                              fit: BoxFit.cover,
                            );
                          },
                        ),
                      );
                    },
                    itemCount: 3,
                    pagination: const SwiperPagination(),
                    control: const SwiperControl(),
                  ),
                ),
                const SizedBox(height: 24),

                /// 用 Expanded 或 Flexible 包裹 GroupedListView
                Expanded(
                  child: GroupedListView<dynamic, String>(
                    elements: _elements,
                    groupBy: (element) => element['group'],
                    groupComparator: (value1, value2) => value2.compareTo(value1),
                    itemComparator: (item1, item2) => item1['name'].compareTo(item2['name']),
                    order: GroupedListOrder.DESC,
                    useStickyGroupSeparators: true,
                    groupSeparatorBuilder: (String value) => Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text(
                        value,
                        textAlign: TextAlign.center,
                        style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                      ),
                    ),
                    itemBuilder: (context, element) {
                      return Card(
                        elevation: 8.0,
                        margin: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
                        child: ListTile(
                          contentPadding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
                          leading: const Icon(Icons.account_circle),
                          title: Text(element['name']),
                          trailing: const Icon(Icons.arrow_forward),
                        ),
                      );
                    },
                  ),
                ),

                const SizedBox(height: 24),
                ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(context, RoutePath.tab);
                  },
                  child: const Text('前往 Tab 页面'),
                ),
                const SizedBox(height: 16),
                ElevatedButton(
                  onPressed: () {
                    Navigator.pushNamed(context, RoutePath.home);
                  },
                  child: const Text('前往 Home 页面'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
